'use strict';
var xcj_window_html='<div v-if="show" id="xcjComponent" @click.stop="close">\n' +
    '    <div class="xcj_window" @click.stop>\n' +
    '        <div class="xcj_window_inner" :style="windowsize">\n' +
    '            <div :style="header" class="xcj_window_header">\n' +
    '                <div :style="font"\n' +
    '                     class="xcj_window_title">{{title?title:"标题"}}\n' +
    '                </div>\n' +
    '                <div class="xcj_window_icon"><i\n' +
    '                        :style="font"\n' +
    '                        class="fa fa-times" aria-hidden="true" @click.stop="close"></i></div>\n' +
    '            </div>\n' +
    '            <div class="xcj_window_content">\n' +
    '                <slot>自定义填充内容</slot>\n' +
    '            </div>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '</div>';
var xcj_switch_html='<div id="xcj_switch":style="bgColor" @click="handle">\n' +
    '    <div class="xcj_switch_circle" :style="circleClass"></div>\n' +
    '</div>'
var xcj_img_html='<div id="xcj_img" :style="boxSize">\n' +
    '    <div v-if="status" class="inner_box" :style="inputStyle">\n' +
    '        <input type="file" @change="fileHandle" :style="inputStyle" class="xcj_img_iput">\n' +
    '        <i :style="fontStyle" class="fa fa-camera"></i>\n' +
    '    </div>\n' +
    '    <div v-else class="inner_box" :style="inputStyle">\n' +
    '        <div :style="deleteSize" class="position_style" @click.stop="deleteHandle">\n' +
    '           <div class="position_style_del"></div>\n' +
    '        </div>\n' +
    '        <img :src="source" :style="imgStyle" class="xcj_img_show">\n' +
    '    </div>\n' +
    '</div>'
var xcj_window = Vue.extend({
    template:xcj_window_html,
    data(){
        return {
            windowsize:{
                minWidth:this.width?this.width:'80vw',
                minHeight:this.height?this.height:'40vh',
                background:this._bgc?this._bgc:'#fff'
            },
            header:{
                background:this.bgcolor?this.bgcolor:'#00a6b2'
            },
            font:{
                color: this.color?this.color:'#000',
                fontSize: this.size?this.size: '18px'
            }
        }
    },
    methods:{
        close:function () {
            if (this.closing){
                this.closing()
            }else {
                this.show=false;
            }
        }
    },
    props:{
        show:Boolean,
        title:String,
        closing:Function,
        width:String,
        height:String,
        bgcolor:String,
        _bgc:String,
        color:String,
        size:String
    },
});

var xcj_switch = Vue.extend({
    template:xcj_switch_html,
    data(){
        return {
            value:false,
            c:this.closecolor?this.closecolor:'rgba(90,90,90,.8)',
            o:this.opencolor?this.opencolor:'#0e9aef',
            bgColor:{
                backgroundColor:this.bgColorHandle(),
                transform:this.scaleHandler()
            },
            circleClass:{
                transform:this.value?'translateX(20px)':'translateX(0) ',
            }
        }
    },
    created(){
        this.init();
    },
    watch:{
      "value":function (e) {
          var that=this
          that.bgColor.backgroundColor=e?that.o:that.c
          that.circleClass={
              transform:e?'translateX(20px)':'translateX(0)'
          }
      }
    },
    methods:{
        init(){
            this.value=this.status?this.status:false

        },
        handle(){
            this.value=!this.value
            this.$emit("call",this.value)
        },
        scaleHandler(){
            switch (this.size) {
                case "small":
                    return "scale(1)"
                case "medium":
                    return "scale(1.2)"
                case "mini":
                    return "scale(0.8)"
                default:
                    return "scale(1)"
            }
        },
        bgColorHandle(){
            if (this.value){
                return this.opencolor?this.opencolor:'#0e9aef'
            }else {
                return this.closecolor?this.closecolor:'rgba(90,90,90,.8)'
            }
        }
    },
    props:{
        status:{
            type:Boolean,
            required:true
        },
        closecolor:String,
        opencolor:String,
        size:String
    }
});
var xcj_img = Vue.extend({
    template:xcj_img_html,
    data(){
        return {
            status:true,
            file:null,
            source:null,
            inputStyle:{
                width:'90px',
                height:'90px'
            },
            imgStyle:{
                width:'90px'
            },
            fontStyle:{
                fontSize:'36px'
            },
            deleteSize:{
                width:'20px',
                height:'20px',
                padding:'5px'
            },
            boxSize:{
                width:'100px'
            },
            obj:null,
        }
    },
    created(){
        this.init()
    },
    watch:{
    },
    methods:{
        init(){
            if (this.size){
                switch (this.size) {
                    case 'small':
                        this.inputStyle.width='60px'
                        this.inputStyle.height='60px'
                        this.fontStyle.fontSize='24px'
                        this.imgStyle.width='60px'
                        this.deleteSize.width='15px'
                        this.deleteSize.height='15px'
                        this.deleteSize.padding='3px'
                        this.boxSize.width='64px'
                        break;
                    case 'medial':
                        this.inputStyle.width='90px'
                        this.inputStyle.height='90px'
                        this.fontStyle.fontSize='36px'
                        this.imgStyle.width='90px'
                        this.deleteSize.width='20px'
                        this.deleteSize.height='20px'
                        this.deleteSize.padding='4px'
                        this.boxSize.width='94px'
                        break;
                    case 'big':
                        this.inputStyle.width='120px'
                        this.inputStyle.height='120px'
                        this.fontStyle.fontSize='48px'
                        this.imgStyle.width='120px'
                        this.deleteSize.width='25px'
                        this.deleteSize.height='25px'
                        this.deleteSize.padding='5px'
                        this.boxSize.width='124px'
                        break;
                }
            }
            if(this._src){
                this.status=false;
                this.source=this._src
            }
            if (this._obj){
                this.obj=this._obj
            }
        },
        fileHandle(file){
            var that=this
            var files=file.target.files
            that.file=files[0];
            var fr = new FileReader();
            fr.readAsDataURL(files[0]);
            fr.onload = function (ev) {
                that.source=this.result
            }
            that.status=false;
            if (that._change){
                that._change(files[0])
            }
        },
        deleteHandle(){
            if (!this.status){
                this.source=null
                this.status=true
            }
            if (this._del){
                if (this.file==null){
                    this._del(this.obj)
                }else {
                    this._del(this.file)
                }
            }
        }
    },
    props:{
        size:String,
        _src:String,
        _change:Function,
        _del:Function,
        _obj:Object
    }
});
Vue.component('xcj-window',xcj_window);
Vue.component('xcj-switch',xcj_switch);
Vue.component('xcj-img',xcj_img);